import React, { useState ,useEffect ,useCallback } from 'react';
function useWinSize(){
  const [ size , setSize] = useState({
      width:document.documentElement.clientWidth,
      height:document.documentElement.clientHeight
  })
  // useCallback缓存方法  [] 只执行一次
  const onResize = useCallback(()=>{
      setSize({
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
      })
  },[]) 
  useEffect(()=>{
      window.addEventListener('resize',onResize)
      // // 销毁时
      return ()=>{
          window.removeEventListener('resize',onResize)
      }
  },[onResize])

  return size;
}

function Example9(){
  const size = useWinSize()
  return (
      <h2>页面Size:{size.width}x{size.height}</h2>
  )
}

export default Example9